<template>
  <div class="chat-container">
    <div class="chat-header">
      <div class="header-title">
        <h2>智能问答</h2>
        <div class="model-info">
          <el-icon><Monitor /></el-icon>
          <el-tag size="small" type="info">
            {{ modelConfig.model }}
          </el-tag>
        </div>
      </div>
      <div class="header-actions">
        <el-tooltip content="清空对话记录" placement="top">
          <el-button type="text" @click="handleClear">
            <el-icon><Delete /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    
    <div class="chat-messages" ref="messagesRef">
      <div class="messages-content">
        <template v-if="chatStore.chatHistory.length">
          <ChatMessage
            v-for="message in chatStore.chatHistory"
            :key="message.id"
            v-bind="message"
            :loading="message === chatStore.currentMessage"
          />
        </template>
        <div v-else class="empty-messages">
          <div class="empty-content">
            <el-icon class="empty-icon"><ChatRound /></el-icon>
            <p class="empty-text">有什么想问的吗？</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="chat-input">
      <ChatInput
        :loading="chatStore.loading"
        @send="handleSend"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, computed } from 'vue'
import { ChatRound, Delete, Monitor } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { useChatStore } from '@/store/chat'
import { useModelStore } from '@/store/model'
import ChatMessage from '@/components/chat/ChatMessage.vue'
import ChatInput from '@/components/chat/ChatInput.vue'

const chatStore = useChatStore()
const modelStore = useModelStore()
const messagesRef = ref(null)
const streaming = ref(false)

// 获取模型配置
const modelConfig = computed(() => modelStore.config)

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  if (messagesRef.value) {
    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
  }
}

// 监听消息变化，自动滚动
watch(() => chatStore.chatHistory.length, scrollToBottom)

// 发送消息
const handleSend = async (messageObj) => {
  if (streaming.value) return
  streaming.value = true
  
  try {
    // 确保消息内容是字符串
    const message = {
      id: messageObj.id || Date.now().toString(),
      content: typeof messageObj.content === 'object' ? 
        messageObj.content.content : 
        messageObj.content,
      role: messageObj.role || 'user',
      time: messageObj.time || new Date(),
      sources: messageObj.sources || []
    }
    
    await chatStore.sendMessage(message)
    await scrollToBottom()
  } finally {
    streaming.value = false
  }
}

// 清空对话
const handleClear = () => {
  ElMessageBox.confirm('确认清空所有对话记录？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    chatStore.clearHistory()
  })
}

onMounted(() => {
  scrollToBottom()
})
</script>

<style lang="scss" scoped>
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color);
  
  .chat-header {
    padding: $spacing-md $spacing-lg;
    border-bottom: 1px solid var(--el-border-color-lighter);
    background-color: var(--el-bg-color-overlay);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 1;
    
    .header-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: var(--el-text-color-primary);
      }
      
      .model-info {
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        
        .el-icon {
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
  
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: $spacing-lg 0;
    scroll-behavior: smooth;
    
    .messages-content {
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .empty-messages {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .empty-content {
        text-align: center;
        color: var(--el-text-color-secondary);
        
        .empty-icon {
          font-size: 48px;
          margin-bottom: $spacing-md;
        }
        
        .empty-text {
          font-size: 16px;
          margin: 0;
        }
      }
    }
  }
  
  .chat-input {
    border-top: 1px solid var(--el-border-color-lighter);
    padding: $spacing-md $spacing-lg;
    background-color: var(--el-bg-color-overlay);
    backdrop-filter: blur(8px);
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
}
</style> 